<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>拖拽演示页面</title>
    <style>
        .container {
            margin: 50px;
            text-align: center;
        }
        .box {
            width: 150px;
            height: 150px;
            display: inline-block;
            margin: 20px;
            border-radius: 8px;
            cursor: move;
            transition: transform 0.3s ease;
        }
        .box:hover {
            transform: scale(1.05);
        }
        #redBox {
            background-color: #ff4444;
            border: 2px solid #cc0000;
        }
        #blueBox {
            background-color: #33b5e5;
            border: 2px solid #0099cc;
            min-height: 150px;
            padding: 20px;
        }
        .drop-highlight {
            background-color: #66ccff;
            transform: scale(1.05);
        }
        p {
            color: #333;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>拖拽演示</h2>
        <div id="redBox" class="box" draggable="true"></div>
        <div id="blueBox" class="box"></div>
        <p>请将红色方块拖到蓝色方块上</p>
    </div>

    <script>
        // 获取元素
        const redBox = document.getElementById('redBox');
        const blueBox = document.getElementById('blueBox');

        // 红色方块拖拽事件
        redBox.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', 'redBox');
            setTimeout(() => redBox.style.opacity = '0.4', 0);
        });

        redBox.addEventListener('dragend', () => {
            redBox.style.opacity = '1';
            blueBox.classList.remove('drop-highlight');
        });

        // 蓝色方块拖拽目标事件
        blueBox.addEventListener('dragover', (e) => {
            e.preventDefault();
            blueBox.classList.add('drop-highlight');
        });

        blueBox.addEventListener('dragleave', () => {
            blueBox.classList.remove('drop-highlight');
        });

        blueBox.addEventListener('drop', (e) => {
            e.preventDefault();
            blueBox.classList.remove('drop-highlight');
            blueBox.appendChild(redBox);
            redBox.style.margin = '0 auto';
        });
    </script>
</body>
</html>
